import { useMemo ,useState} from 'react'
import styles from './index.module.less';
import ReactEcharts from 'echarts-for-react';
const colors = ['#0091FF', '#44D7B6', '#00FFFF', '#6f7de3', '#088DFF', '#FF916C', '#FF9933', '#9E5CFF', '#F88CFF'];
const Lines = ({ data }) => {
    // console.log('data==>',data);
    const { xAxis = [], yAxis = [],tab4value = 0 } = data;
    let seriesData = [];
    const [type, setType] = useState('dashed');
    const options = useMemo(() => {
        seriesData = {
            name: '',
            type: "line",
            symbolSize: 10,
            symbol: "none",
            itemStyle: {
                width: 1,
                // color: colors[index],
            },
            data: yAxis
        }
        return {
            tooltip: {
                show: false,
                trigger: "axis",
                backgroundColor: 'rgba(30,144,255,0.7)',
                borderColor: '#1E90FF',
                borderWidth: 3,
                textStyle: {
                    color: '#fff'
                }
            },
            legend: {
                show: false,
                align: 'right',
                right: '1%',//距离左边距
                itemWidth: 16,//图标宽
                itemHeight: 8,//图标高
                // icon:"arrow",
                data: [
                    {
                        icon: "image://",
                        name: '今日'
                    },
                    {
                        icon: "image://",
                        name: '昨日'
                    }
                ],
                textStyle: {
                    color: "rgba(0, 0, 0, 0.5)",
                    fontSize: 12,
                },
            },
            grid: {
                top: "20%",
                bottom: '10%',
                left: '10%',
                right: '15%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    axisLine: {
                        show: data.length > 0 ? true : false,
                        lineStyle: {
                            color: 'rgba(56, 145, 255, 0.4)',
                            width: 1
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(56, 145, 255, 0.4)',
                            width: 1
                        }
                    },
                    axisLabel: {
                        formatter: function (value) {
                            let valueTxt = '';
                            if (value.length > 16) {
                                valueTxt = value.substring(0, 16) + '...';
                            }
                            else {
                                valueTxt = value;
                            }
                            return valueTxt;
                        },
                        show: false,
                        textStyle: {
                            color: 'rgba(0, 0, 0, 0.65)',
                            fontSize: 12,
                            itemWidth: 60,
                        },
                    },
                    data: xAxis
                }],
            yAxis: {
                type: "value",
                position: 'right',//坐标轴位置，移至右边
                minInterval:1,
                splitNumber:2,
                min: 0,  //取0为最小刻度
                max: tab4value == 3 ? 'dataMax':100, //取100为最大刻度
                // interval: 35, // 刻度间隔
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgb(217, 217, 217)',
                        width: 1,
                        type: 'dashed',
                    }
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: 'rgba(56, 145, 255, 0.4)',
                        width: 1
                    }
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    show: tab4value == 3 ? false : true,
                    textStyle: {
                        color: 'rgba(0, 0, 0, 1)',
                        fontSize: 6
                    },
                    formatter: function (value) {
                        if (value / 2 % 10 === 0) {
                            return value;
                        } else {
                            return ''
                        }
                    },
                }

            },
            series: seriesData
        };
    }, [data]);
    return (
        <div className={styles.echarts}>
            {xAxis.length ? <ReactEcharts
                style={{
                    position: 'absolute',
                    width: '100%',
                    height: '100%',
                }}
                option={options}
                opts={{ devicePixelRatio: 2 }}
            /> : <div className={styles.noData}>暂无数据</div>}
            {/* {
                !xAxis.length && <div className={styles.noData}>暂无数据</div>
            } */}
        </div>
    );
}

export default Lines